<template>
	<div><canvas class="mycanvas" @click="click" width="76" height="40">抱歉，您的浏览器不支持canvas元素，换个浏览器试试？</canvas></div>
</template>
<script>
import { setItem } from '@/utils/storage.js';
export default {
	data() {
		return {
			value: '',
			code: '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
		};
	},
	mounted() {
		this.fourCode();
	},
	methods: {
		randomColor() {
			//得到随机的颜色值
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			return 'rgb(' + r + ',' + g + ',' + b + ')';
		},
		click() {
			this.fourCode();
		},
		fourCode() {
			this.value = '';

			for (let a = 0; a < 4; a++) {
				this.value += this.code1();
			}
			setItem('picker', this.value);
			this.doDraw();
		},
		code1() {
			let index = Math.floor(Math.random() * (this.code.length - 1) + 1);
			return this.code[index];
		},
		doDraw() {
			var x = 20;
			var y = 20 + Math.random() * 8;
			var deg = (Math.random() * 30 * Math.PI) / 180;
			//  获取canvas
			var canvas = document.getElementsByClassName('mycanvas');
			canvas[0].width = canvas[0].width; //清空画布
			canvas[0].height = canvas[0].height;
			var canvas_width = canvas[0].width;
			var canvas_height = canvas[0].height;
			var context = canvas[0].getContext('2d');
			context.font = 'bold 23px 微软雅黑';
			context.fillText(this.value, 15, 30);
			context.translate(x, y); //canvas原点的偏移量
			context.rotate(deg); //旋转度数
			context.fillStyle = this.randomColor(); //设置颜色
			context.strokeStyle = this.randomColor(); //设置颜色
			context.rotate(-deg);
			context.translate(-x, -y);
			for (var i = 0; i <= 15; i++) {
				//验证码上显示线条
				context.strokeStyle = this.randomColor(); //轮廓风格
				context.beginPath();
				context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
				context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
				context.stroke();
			}
			for (let i = 0; i <= 30; i++) {
				//验证码上显示小点
				context.strokeStyle = this.randomColor();
				context.beginPath(); //新建一条路径
				let x = Math.random() * canvas_width;
				let y = Math.random() * canvas_height;
				context.moveTo(x, y); //吧画笔移动到指定位置
				context.lineTo(x + 1, y + 1); //想指定位置移动
				context.stroke();
			}
		}
	}
};
</script>
<style>
.mycanvas {
	border: 1px solid rgb(199, 198, 198);
	background: #fff;
	border-radius: 0.2rem;
	margin-bottom: -0.45rem;
}
</style>
